<!-- users -->
<template>
  <GgPage pageType="2" title="Users">
    <template v-slot:left>
      <div class="mar-l-b">
        <gg-create-button @click="isShow3 = true" label="Add user" />
      </div>
      <BaseFormDialog
        v-model="isShow3"
        title="Add user"
        :data="addUserFormData"
        :renderPass="renderPass"
        @submit="submit"
        textReminder="* indicates a required field"
        userReminder="Use at least 8 characters"
      >
        <template slot="renderHtml" slot-scope="scope">
          <PhoneNumber
            v-if="scope.data.key == 'phoneNo'"
            v-model="scope.data.value"
            ref="PhoneNumber1"
          ></PhoneNumber>
          <baseGGSelect
            v-else-if="scope.data.key == 'country'"
            v-model="scope.data.value"
            ref="country"
            placeholder="roles *"
          >
            <md-option
              v-for="(item, index) in roles"
              :key="index"
              :value="item"
            >
              {{ item }}
            </md-option>
          </baseGGSelect>
        </template>
      </BaseFormDialog>
      <gg-flex-menus
        :menus="menuDatas"
        @select="menuSelect"
        :default-active="activeIndex"
      />
    </template>
    <!-- <GgPageHeader title="Users" class="mar-b-0" /> -->
    <edoovo-table
      height="100%"
      ref="multipleTable"
      :data="tableData"
      rowKey="id"
      title="Users"
      defaultValue="-"
      class="list-tableBox"
      v-loading="isLoading"
      @sortChange="_onSortChange"
      :sort="sort"
    >
      <!-- ===== -->
      <!-- 空状态 -->
      <!-- ===== -->
      <div slot="empty" style="text-align: center">
        <div
          style="
            width: 213px;
            text-align: center;
            border-radius: 50%;
            margin-bottom: 12px;
            line-height: 200px;
          "
        >
          <img
            style="width: 100%"
            :src="require('@/assets/images/products/noData.svg')"
          />
        </div>
        <p style="font-size: 22px">No lessons yet.</p>
      </div>
      <!-- ======= -->
      <!-- 分页组件 -->
      <!-- ======= -->
      <edoovo-pagination
        slot="pagination"
        @size-change="_pageSizeChange"
        @current-change="_pageChange"
        :current-page="pageNumber"
        :page-size="pageSize"
        :total="totalNum"
      />
      <!-- ====== -->
      <!-- 筛选组件 -->
      <!-- ====== -->
      <div v-if="filterRenderData.length" class="list-filterBox" slot="filter">
        <base-filter
          ref="tablefilter"
          @filterCallback="_filterCallback"
          :renderData="filterRenderData"
          :multKeys="multKeys"
        />
      </div>
      <!-- =========== -->
      <!-- 每一项column -->
      <!-- =========== -->
      <edoovo-table-column
        size="L"
        label="Name"
        class="user_name"
        prop="name"
        sortName="name"
        :tooltip="true"
        v-slot="{ row }"
        @click="
          () => {
            this.$router.push({ name: 'personalInfo' });
          }
        "
      >
        <div class="table-cell-box">
          <head-img
            class="table-cell-img"
            :src="row.avatar ? `${row.avatar}?${+new Date()}` : ``"
            :firstName="row.firstName"
            :lastName="row.lastName"
            line-height="32"
          />
          <span class="table-cell-name">{{ row.name }}</span>
        </div>
      </edoovo-table-column>
      <edoovo-table-column
        size="S"
        label="Gender"
        prop="gender"
        sortName="gender"
      />
      <edoovo-table-column size="M" label="Nationality" prop="nationality" />
      <edoovo-table-column
        size="L"
        label="Email"
        prop="email"
        sortName="email"
      />
      <edoovo-table-column
        size="M"
        label="Phone"
        prop="phone"
        sortName="phone"
        v-slot="{ row }"
        :getTooltipText="(row) => `${row.lastName}${row.phone}`"
      >
        {{ row.lastName }}{{ row.phone }}
      </edoovo-table-column>
      <edoovo-table-column
        size="M"
        label="Roles"
        prop="roles"
        sortName="roles"
      />
      <edoovo-table-column
        size="M"
        label="Job title"
        prop="jobTitle"
        sortName="jobTitle"
      />
      <edoovo-table-column size="S" label="Type" prop="type" sortName="type" />
      <edoovo-table-column
        size="S"
        label="Status"
        prop="status"
        sortName="status"
      />
      <!-- ====== -->
      <!-- action -->
      <!-- ====== -->
      <edoovo-table-column v-slot="{ row }" key="action">
        <el-tooltip
          content="Edit"
          popper-class="edoovo-table-cell-tooltip"
          :visible-arrow="false"
        >
          <gg-submit-button @click="() => {}"> Edit </gg-submit-button>
        </el-tooltip>
        <el-tooltip
          :content="
            row.canDelete ? 'Delete' : 'Cannot delete the lesson used in course'
          "
          popper-class="edoovo-table-cell-tooltip"
          :visible-arrow="false"
        >
          <div style="margin-left: 10px">
            <gg-submit-button :disabled="!row.canDelete" @click="() => {}">
              Delete
            </gg-submit-button>
          </div>
        </el-tooltip>
      </edoovo-table-column>
    </edoovo-table>
  </GgPage>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      renderPass: true,
      slotValue: {
        PhoneNumber1: { countryCode: "+65", phoneNumber: "" },
        PhoneNumber2: { countryCode: "+65", phoneNumber: "" },
      },
      slotData: ["PhoneNumber1"],
      roles: ["admin", "editor"],
      menuDatas: [
        {
          name: "Users",
          key: "Users",
          active: true,
          children: [
            {
              name: "Active",
              key: "Active",
            },
            {
              name: "Deleted",
              key: "Deleted",
            },
          ],
        },
        {
          name: "Roles",
          key: "Roles",
        },
      ],
      activeIndex: "Users",
      isLoading: false,
      sort: { name: "createDate", type: "desc" },
      pageNumber: 1,
      pageSize: 20,
      totalNum: 4,
      tableData: [
        {
          id: "5f7c9c02672f402a05501de1",
          name: "Joanna Doe",
          avatar: require("@/assets/logo.png"),
          firstName: "f1",
          lastName: "L1",
          gender: "Female",
          nationality: "Singaporean",
          email: "J.D@edoovo.com",
          phone: "+65 67912323",
          roles: "Registrar",
          jobTitle: "Teacher",
          type: "Full-time",
          status: "Active",
          canDelete: false,
        },
        {
          id: "5f7c9c02672f402a05501de2",
          name: "Eric Wong",
          firstName: "f2",
          lastName: "L2",
          gender: "Male",
          nationality: "Singaporean",
          email: "Jordon.DanielFa@edoovo.com",
          phone: "+65 67912323",
          roles: "Curriculum Specialist",
          jobTitle: "Teacher",
          type: "Full-time",
          status: "Deleted",
          canDelete: true,
        },
      ],
      filterRenderData: [
        { filterKey: "name", type: "input" },
        {
          filterKey: "gender",
          type: "radio",
          radioData: [
            { key: "Male", value: "Male" },
            { key: "Female", value: "Female" },
          ],
        },
        {
          filterKey: "Nationality",
          type: "checkbox",
          checkboxData: [
            { key: "Singaporean", value: "Singaporean" },
            { key: "Japan", value: "Japan" },
            { key: "England", value: "England" },
          ],
        },
        { filterKey: "Email", type: "input" },
        { filterKey: "Phone No.", type: "input" },
        {
          filterKey: "Job title",
          type: "radio",
          radioData: [
            { key: "Admin", value: "Admin" },
            { key: "Registrar", value: "Registrar" },
          ],
        },
        {
          filterKey: "Type",
          type: "radio",
          radioData: [
            { key: "Full-time1", value: "Full-time1" },
            { key: "Part-time", value: "Part-time" },
          ],
        },
      ],
      multKeys: [],
      isShow3: true,
      addUserFormData: [
        {
          placeholder: "name *",
          key: "name",
          value: "",
          reg: /^[\S]{2,4}$/,
          errorText: "名字为2-4个字，不含有空格",
        },
        {
          placeholder: "phoneNo",
          key: "phoneNo",
          float: true,
          value: { countryCode: "+86", phoneNumber: "" },
          renderHtml: true,
        },
        {
          placeholder: "age *",
          key: "age",
          value: "",
          reg: /^[\S]{2,4}$/,
          errorText: "名字为2-4个字，不含有空格",
        },
        {
          placeholder: "roles *",
          key: "country",
          float: true,
          value: "",
          renderHtml: true,
        },
      ],
    };
  },
  watch: {
    addUserFormData: {
      handler() {
        this.$nextTick(() => {
          let aaa = !!this.$refs.country.value;
          let bbb = this.slotData.every((item) => {
            return (
              this.$refs[item].isError &&
              !this.$refs[item].isError.show &&
              this.$refs[item].isError.val
            );
          });
          this.renderPass = aaa && bbb;
          console.log("aaa", aaa);
          console.log("renderPass:", this.renderPass);
        });
      },
      deep: true,
    },
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
    },
    _getData() {
      console.log("加载新数据");
    },
    _onSortChange(sort) {
      this.sort = sort;
      this._getData();
    },
    _pageChange(val) {
      this.pageNumber = val;
      this._getData();
    },
    _pageSizeChange(val) {
      this.pageSize = val;
      this._getData();
    },
    _filterCallback(data) {
      console.log("用户选的筛选条件 === ", data);
    },
    submit(res) {
      console.log(33);
      console.log("done", res);
      console.log(44);
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
</style>